<docs>
## 将搜索条件功能抽离出来
### 返回 修改后的条件变量 重置和确定事件
### 所有的逻辑都在组件中进行 减少组件间的耦合度
</docs>

<template>
  <div class="bar_wrap">
    <div :class="[arrow_flag == 1 && showFlag?'item _active':'item']" @click="point(1)">
      地区
      <i class="arrow"></i>
    </div>
    <div :class="[arrow_flag == 2 && showFlag?'item _active':'item']" @click="point(2)">
      职业
      <i class="arrow"></i>
    </div>
    <div :class="[arrow_flag == 3 && showFlag?'item _active':'item']" @click="point(3)">
      行业
      <i class="arrow"></i>
    </div>
    <div :class="[arrow_flag == 4 && showFlag?'item _active':'item']" @click="point(4)">
      薪酬
      <i class="arrow"></i>
    </div>
    <div :class="[arrow_flag == 5 && showFlag?'item _active':'item']" @click="point(5)">
      更多
      <i class="arrow"></i>
    </div>

    <div class="search-select-wrap" v-show="arrow_flag==1 && showFlag">
      <div class="search-select" @click.stop>
        <div class="search-more area clearfix">
          <span style="font-weight: bold;" @click="reSet('gzdd')">全部</span>
          <span
            :class="{active:dqclassArr.indexOf(item.dmmc)!=-1}"
            v-for="item in objSearchAll.cdg_regioncode"
            :key="item.dmmc"
            @click="searchOption(item.dmmc,'gzdd')"
          >{{item.dmmc}}</span>
        </div>
        <div class="search_btn_wrap">
          <div @click="reSet('gzdd')">重置</div>
          <div @click="befor_search()">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arrow_flag: false,
      showFlag: false
    };
  },
  props: {
    form: {
      type: Object,
      required: true,
      default: false
    }
  },
  methods: {
    point(num) {
      this.$modalHelper.afterOpen();
      if (num != this.arrow_flag) {
        this.showFlag = true;
      } else {
        this.showFlag = !this.showFlag;
      }
      if (!this.showFlag) {
        setTimeout(() => {
          if (
            this.$parent.$refs.scoll.scrollHeight + 376 >
            this.$store.state.winHeight
          ) {
            this.$modalHelper.beforeClose();
          }
        }, 100);
      }
      this.arrow_flag = num;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~common/scss/var.scss";
.bar_wrap {
  display: flex;
  padding: 0 $line-height/2;
  background: #fff;
  border-radius: $radius-base3 $radius-base3 0 0;
  .item {
    // text-align: center;
    flex: 1;
    box-sizing: border-box;
    font-size: $font-size-ultra / 2;
    padding: $height-base/5 * 2 0 $font-size-large $padding-btn;
    position: relative;
    color: $color-text-title;
    background-color: #fff;
    transition: $transition;
    border-bottom: 1px solid $color-text-placeholder;
    transition: transform 0.3s;
    i {
      display: inline-block;
      height: $line-height-base;
      width: $line-height-base;
      vertical-align: middle;
    }
    .arrow::before {
      position: absolute;
      transition: transform 0.3s;
      transform-origin: 20% 40%;
      content: "";
      width: $padding-base;
      height: $padding-base;
      border-top: 2px solid #ccc;
      border-left: 2px solid #ccc;
      transform: rotate(-135deg);
      top: $font-size-base * 2;
      right: $radius-base2;
    }
  }
  .item:after {
    content: "|";
    color: $color-text-placeholder;
    position: absolute;
    right: 0;
  }
  .item:last-child:after {
    content: "";
  }
  ._active {
    color: #3366cc;
    transition: transform 0.3s;
    .arrow::before {
      position: absolute;
      transition: transform 0.3s;
      transform-origin: 20% 40%;
      content: "";
      width: $padding-base;
      height: $padding-base;
      border-top: 2px solid #ccc;
      border-left: 2px solid #ccc;
      transform: rotate(45deg);
      top: $font-size-base * 2;
      right: $radius-base2;
    }
  }
}
.search-select-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 10;
  background: rgba($color: #000000, $alpha: 0.8);
}
.search-select {
  width: 100%;
  // max-height: $height-div * 12;
  background-color: #fff;
  color: #3366cc;
  border-radius: 0 0 $radius-base3 $radius-base3;
  overflow: auto;
  .search-select-content {
    height: $height-div * 10;
    width: 100%;
    background-color: #f4f4f4;
    .select-content-left {
      float: left;
      height: 100%;
      width: 50%;
      // padding-right: $font-size-ultra-plus/4;
      box-sizing: border-box;
      overflow: auto;
      p {
        padding: $font-size-base $radius-base4;
        background-color: #fff;
        color: #333;
        margin-top: 1px;
      }
      .active {
        color: #3366cc;
      }
    }
    .select-content-right {
      float: right;
      height: 100%;
      width: 50%;
      overflow: auto;
      padding: $radius-base3 $font-size-ultra-plus/4;
      box-sizing: border-box;
      p {
        color: #333;
        // margin: 0 $padding-base-half/2 $padding-base-half/4 0;
        padding: $font-size-base/2 $radius-base4/2;
        margin-bottom: $font-size-base/2;
      }
      .active {
        color: #fff;
        background-color: #3366cc;
        border-radius: $padding-base-half;
      }
    }
  }
  .search-more {
    padding: $font-size-mini/2 $font-size-mini $font-size-mini/2 $font-size-mini;
    padding-bottom: 0;
    span {
      float: left;
      margin: $padding-base-half 0;
    }
  }
  span {
    display: inline-block;
    padding: 15px;
  }
  div {
    // margin-top: 20px;
    // border-radius: 0 0 $radius-base3 0;
    p {
      color: darkgray;
    }
  }
  .active {
    color: #fff;
    background-color: #3366cc;
    border-radius: $padding-base-half;
  }
  .area span {
    margin: 0 10px 10px;
  }
}
.search_btn_wrap {
  display: flex;
  // width: 100%;
  // margin-left: -60px;
  div {
    flex: 1;
    // width: 100%;
    text-align: center;
    padding: 15px 0;
    // border: 1px solid #eeeeee;
    background-color: #f7f8fa;
    border-radius: 0 0 $radius-base3 $radius-base3;
    color: #3366cc;
  }
  div:last-child {
    border-radius: 0 0 $radius-base3 0;
    // border-top: 1px solid #ccc;
    background-color: #3366cc;
    color: #fff;
  }
}
</style>
